<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        点击发送,禁用三秒        
     -->
    <input type="text" placeholder="发送邮件">
    <button>发送</button>
    <script>
        //返回一个伪数组,我们获取第一个
        var inp = document.getElementsByTagName("input")[0]
        var btn = document.getElementsByTagName("button")[0]

        //点击发送按钮
        btn.onclick = function(){
            /* 
                点击完毕之后,判断有没有文本框
            */
            // 获取文本的value
            var val = inp.value
            if(!val.trim()) {
                window.alert("请输入邮箱,再点发送!")
                return;
            };

            //禁用按钮三秒
            btn.setAttribute("disabled","true")
            //禁用文本框三秒
            inp.setAttribute("disabled","true")
            //当我点击完禁用按钮之后,会出现一个3s
            btn.innerHTML = "3s"
            //三秒钟之后,结束禁用
            var time = 3;
            //给定时器取一个名
            var timer = setInterval(function(){
                //将时间-1,赋值给btn按钮
                btn.innerHTML = `${--time}s`;
                if(time<=0){
                    //给一个提醒,表示发送完毕
                    window.alert("邮件已发送完毕!")
                    //终止定时器
                    clearInterval(timer)
                    //释放空间
                    timer = null;
                    //再次修改html值
                    btn.innerHTML = "重新发送"
                    //解开禁用按钮与文本框
                    btn.removeAttribute("disabled")
                    inp.removeAttribute("disabled")
                }
            },1000)
        }
    </script>
</body>
</html>